<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法1：差值表达式等、data、methods、computed和watch</title>
    <script src="http://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1 style="color:red">知识点1:差值表达式</h1>
        <!-- {{}}差值表达式符号 -->
         <p>我是变量：{{msg}}</p>
         <p>我是表达式：{{num+100}}</p>
         <p>我是条件运算符：{{1+1==2?'ok':'no'}}</p>
         <p>我是方法：{{add()}}</p>
         <h1 style="color:red">知识点2:data</h1>
         <h3>我们在控制台中可以通过实例名.$data的形式来访问或修改data中的数据</h3>
         <h1 style="color:red">知识点2:methods</h1>
         <h3>方法的定义有两种形式:1.方法名(){} 2.方法名:function(){}</h3>
         <p>{{sub(999999999)}}</p>
         <h1>知识点4:computed计算属性</h1>
         <h3>当我们遇到比较复杂的逻辑时,vue提倡我们使用computed计算属性
            在计算属性里面，我们可以解决比较复杂的逻辑，包括逻辑运算，函数运用等，最后只要返回一个结果就可以了
         </h3>
         <p>字符串倒置：{{rev}}</p>
         <p>调用方法字符串倒置：{{revMethod()}}</p>
         <h3>计算属性是基于其依赖的变量进行缓存，只有它相关的依赖发生改变，才会重新求值，
            而方法是每次页面刷新时都会重新调用
         </h3>
         <h3>通常计算属性是不能进行修改的，是只读的</h3>
         <h1>知识点5：watch 监听</h1>
         <h3>
            当我们在需要某种状态变化时，执行一些其他操作，watch具有状态监听功能
            只要监听到当前vue实例中的数据变化，就会调用当前数据所绑定的方法
         </h3>
         <h4>1.函数监听器：在watch选项中声明的函数即为函数式监听器，其中函数名就是我们要监听的数据源</h4>
         <!--在后台中输入appConn.$data.grade= 50 和100来体会监听器-->
         <h4>2.对象监听器：在watch选项中声明的函数即为对象式监听器，其中函数名就是我们要监听的数据源</h4>
    </div>
</body>
</html>
<script>
    const appConn = Vue.createApp({
        //data里面放置全部的数据，包括变量与对象
        data() {
            return {
                msg:'我的第一个vue页面',
                num:1,
                grade:60,
                users:{
                    name:'wangxinyu',
                    age:19,
                }
            }
        },

        //在methods里面放置全部的方法
        methods:{
            add(){
                return this.num + 100000
            },
            sub:function(val){
                return this.num + val
            },
            revMethod(){
                console.log("我是方法,我被调用了一次！");
                return this.msg.split('').reverse().join('')
            }
        },
        computed:{
            //在此次放置全部的计算属性
            //字符串倒置
            rev(){
                console.log("我是计算属性,我被调用了一次！");
                return this.msg.split('').reverse().join('')
        }
    },
    watch:{
        //此处防止哦所有的监听器（侦听器）
        grade(newData,oldData){
            console.log("改变前的数据"+oldData);
            console.log("改变前的数据"+newData);
            if(oldData<newData){
                console.log("你进步了，不错，奖励100元！");
            }
            else{
                console.log("你退步了，快给我100块钱！");
            }
        },
        //对象式监听器
        'users.age':{
            handler(newData,oldData){
            console.log("改变前的数据"+oldData);
            console.log("改变前的数据"+newData);
            if(newData>=120 || newData<0)
                console.log("你确定你输入的是年龄吗？")
            
        }
        }
    }
    }).mount("#app")
</script>
